<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Roker  - Corporate, Creative, Multi Purpose, Responsive And Retina Template</title> 
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Roker  - Corporate, Creative, Multi Purpose, Responsive And Retina Template">
    <meta name="author" content="iwthemes.com">   

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Theme CSS -->
    <link href="css/style.css" rel="stylesheet" media="screen">

    <!-- Skins Theme -->
    <link href="#" rel="stylesheet" media="screen" class="skin">

    <!-- Favicons -->
    <link rel="shortcut icon" href="img/icons/favicon.ico">
    <link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">  

    <!-- Head Libs -->
    <script src="js/modernizr.js"></script>

    <!--[if lte IE 9]>
        <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
        <script src="js/responsive/respond.js"></script>
    <![endif]-->

    <!-- styles for IE -->
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/ie/ie.css" type="text/css" media="screen" />            
    <![endif]-->

    <!-- Skins Changer-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   
  </head>
  <body> 

    <!-- Theme-options -->
    <div id="theme-options">
            <div class="title">Theme Options<span title="Theme Options"><i class="fa fa-cogs right"></i></span></div>
            <span>COLORS</span>
            <ul id="colorchanger">      
                <li><a class="colorbox blue" href="?theme=blue" title="Blue Skin"></a></li>
                <li><a class="colorbox red" href="?theme=red" title="Red Skin"></a></li>
                <li><a class="colorbox yellow" href="?theme=yellow" title="Yellow Skin"></a></li>
                <li><a class="colorbox green" href="?theme=green" title="Green Skin"></a></li>
                <li><a class="colorbox orange" href="?theme=orange" title="Orange Skin"></a></li>
                <li><a class="colorbox purple" href="?theme=purple" title="Purple Skin"></a></li>
                <li><a class="colorbox pink" href="?theme=pink" title="Pink Skin"></a></li>
                <li><a class="colorbox cocoa" href="?theme=cocoa" title="Cocoa Skin"></a></li>
            </ul>
            <span>LAYOUT STYLE</span>
            <ul class="layout-style">      
                <li class="wide active">Wide</li>
                <li class="boxed">Boxed</li> 
                <li class="boxed-margin">Boxed Margin</li>               
            </ul>
            <span>WEBSITE TYPE</span>
           <ul class="layout-style">      
                <li class="active"><a href="index.html">Corporate</a></li>
                <li><a href="index-creative.html">Creative</a></li>
                <li><a href="index-one-page.html" >One Page</a></li>                
            </ul>  
            <div class="patterns">
                <span>BACKGROUND PATTERNS</span>
                <ul class="backgrounds">
                    <li class="bgnone" title="None - Default"></li>
                    <li class="bg1"></li>
                    <li class="bg2"></li>
                    <li class="bg3"></li>
                    <li class="bg4 "></li>
                    <li class="bg5"></li> 
                    <li class="bg6"></li>
                    <li class="bg7"></li>
                    <li class="bg8"></li>
                    <li class="bg9 "></li>
                    <li class="bg10"></li> 
                    <li class="bg11"></li>                   
                </ul>  
            </div>
    </div>
    <!-- End Theme-options -->
          
    <!-- layout-->
    <div id="layout">

         <!-- Login Client -->
        <div class="jBar">
          <div class="container">            
              <div class="row">    

                  <div class="col-md-10">
                     <div class="row padding-top-mini">
                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-check-square"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Login or create new account.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam. Pellentesque habitant</p>
                            </div>
                        </div>      
                        <!-- End Item service-->

                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-star"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Review your order.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam Pellentesque habitant.</p>
                            </div>
                        </div>      
                        <!-- End Item service-->

                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-credit-card"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Payment And FREE shipment.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam. Pellentesque habitant</p>
                            </div>
                        </div>      
                        <!-- End Item service-->
                     </div>
                  </div>

                  <div class="col-md-2">
                      <h5>Client Login</h5>
                      <form>
                          <input type="email" placeholder="Username" required>
                          <input type="password" placeholder="Password" required>
                          <input type="submit" class="btn btn-primary" value="sign in">
                          <span>Or</span>                       
                          <input type="submit" class="btn btn-primary" value="Register">
                      </form>
                  </div>

                            
                  <span class="jTrigger downarrow"><i class="fa fa-minus"></i></span>
              </div>
          </div>
      </div>
      <span class="jRibbon jTrigger up" title="Login"><i class="fa fa-plus"></i></span>
      <div class="line"></div>
      <!-- End Login Client -->

        <!-- Info Head -->
        <section class="info-head">  
            <div class="container">
                <ul>  
                    <li><i class="fa fa-headphones"></i> 01800034567</li>
                    <li><i class="fa fa-comment"></i> <a href="#">Live chat</a></li>
                    <li>
                        <ul>
                          <li class="dropdown">
                            <i class="fa fa-globe"></i> 
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Language<i class="fa fa-angle-down"></i>
                            </a>
                             <ul class="dropdown-menu">  
                                 <li><a href="#"><img src="img/language/spanish.png" alt="">Spanish</a></li>
                                 <li><a href="#"><img src="img/language/english.png" alt="">English</a></li>
                                 <li><a href="#"><img src="img/language/frances.png" alt="">Frances</a></li>
                                 <li><a href="#"><img src="img/language/portugues.png" alt="">Portuguese</a></li>
                            </ul>
                          </li>                      
                        </ul>
                    </li>
                </ul> 
            </div>            
        </section>
        <!-- Info Head -->

        <!-- Header-->
        <header class="animated fadeInDown delay1">           
            <div class="container">
                <div class="row">

                    <!-- Logo-->
                    <div class="col-md-3 logo">
                        <a href="index.html" title="Return Home">                            
                            <img src="img/logo.png" alt="Logo" class="logo_img">
                        </a>
                    </div>
                    <!-- End Logo-->
                                                      
                    <!-- Nav-->
                    <nav class="col-md-9">
                        <!-- Menu-->
                        <ul id="menu" class="sf-menu">
                            <li>
                                <a href="index.html">HOME <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="index.html">Home Corporate</a></li>
                                    <li><a href="index-creative.html">Home Creative</a></li>
                                    <li><a href="index-alternative.html">Home Alternative</a></li>
                                    <li><a href="index-one-page.html">Home One Page</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="services.html">Services Default</a></li>
                                    <li><a href="services-options.html">6 services options</a></li><li><a href="http://www.weidea.net">More</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="feature-princing-tables.html">FEATURES <i class="fa fa-angle-down"></i></a>
                                <ul> 
                                    <li>
                                        <a href="#">Sliders Options<i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="index.html">Camera Slider Advance Captions</a></li>
                                             <li><a href="index-one-page.html">Camera Slider Simple Captions</a></li>
                                            <li><a href="index-alternative.html">Flex Slider ( Video option)</a></li>
                                        </ul>
                                    </li>   
                                    <li>
                                        <a href="#">Pages <i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="page-register.html">Register User</a></li>                              
                                            <li><a href="page-full-width.html">Full Width</a></li>
                                            <li><a href="page-left-sidebar.html">Left Sidebar</a></li>
                                            <li><a href="page-right-sidebar.html">Right Sidebar</a></li>
                                            <li><a href="page-404.html">404 Page</a></li>
                                            <li><a href="page-faq.html">FAQ</a></li>
                                            <li><a href="sitemap.html">Sitemap</a></li>
                                         </ul>
                                    </li> 
                                    <li>
                                        <a href="#">Headers <i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="feature-header-1.html">Header Version 1</a></li>
                                            <li><a href="feature-header-2.html">Header Version 2</a></li>
                                            <li><a href="feature-header-3.html">Header Version 3</a></li>
                                        </ul>
                                    </li> 
                                    <li>
                                        <a href="#">Footers <i class="fa fa-angle-right"></i></a>
                                        <ul>
                                            <li><a href="feature-footer-1.html#footer">Footer Version 1</a></li>
                                            <li><a href="feature-footer-2.html#footer">Footer Version 2</a></li>
                                            <li><a href="feature-footer-3.html#footer">Footer Version 3</a></li>
                                        </ul>
                                    </li>                           
                                    <li><a href="feature-princing-tables.html">Princing Tables</a></li>
                                    <li><a href="feature-grid-system.html">Grind System</a></li>
                                    <li><a href="feature-typograpy.html">Tipograpy</a></li>
                                    <li><a href="feature-icons.html">Icons</a></li>
                                    <li><a href="feature-elements.html">Elements</a></li>
                                 </ul>
                            </li>   
                            <li>
                                <a href="work-4-columns.html">WORK <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="work-4-columns.html">4 Columns</a></li>
                                    <li><a href="work-3-columns.html">3 Columns</a></li>
                                    <li><a href="work-2-columns.html">2 Columns</a></li>
                                    <li><a href="single-work.html">Single Work</a></li>
                                </ul>
                            </li>                                
                                <li>
                                <a href="blog.html">BLOG <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="blog.html">Post</a></li>
                                    <li><a href="blog-post.html">Single Post</a></li>
                                </ul>
                            </li>                                                                        
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                        <!-- End Menu-->
                    </nav>
                    <!-- End Nav-->
                    
                </div><!-- End Row-->
            </div><!-- End Container-->
        </header>
        <!-- End Header-->


        <!-- Title Section -->           
        <section class="title-section">
            <div class="container">
                <!-- crumbs --> 
                <div class="row crumbs">
                   <div class="col-md-12">
                        <a href="index.html">Home</a> / <a href="#">Features</a> / <a href="#">Pages </a> / Elements
                   </div>
                </div>
                <!-- End crumbs --> 

                <!-- Title - Search--> 
                <div class="row title">
                    <!-- Title --> 
                    <div class="col-md-9">
                        <h1>Elements
                            <span class="subtitle-section">
                               Pages Styles
                                <span class="left"></span>
                                <span class="right"></span>
                            </span>
                            <span class="line-title"></span>
                        </h1>
                    </div>
                    <!-- End Title--> 

                    <!-- Search--> 
                    <div class="col-md-3">
                        <form class="search" action="#" method="Post">
                            <div class="input-group">
                                <input class="form-control" placeholder="Search..." name="email"  type="email" required="required">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="submit" name="subscribe" >Go!</button>
                                </span>
                            </div>
                        </form>  
                    </div>
                    <!-- End Search--> 
                </div>
                <!-- End Title -Search --> 
              
            </div>
        </section>   
        <!-- End Title Section --> 


        <!-- Works -->
        <section class="paddings">
            <div class="container">
              
               <div class="container">

                    <div class="row">
                        <div class="col-md-6">
                            <h2>Buttons</h2>

                            <button type="button" class="btn btn-default">Default</button>

                            <button type="button" class="btn btn-primary">Primary</button>

                            <button type="button" class="btn btn-success">Success</button>

                            <button type="button" class="btn btn-info">Info</button>

                            <button type="button" class="btn btn-warning">Warning</button>

                            <button type="button" class="btn btn-danger">Danger</button>

                            <button type="button" class="btn btn-link">Link</button>

                            <h2 class="spaced padding-top-mini">Buttons Disabled</h2>

                            <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
                            <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

                        </div>

                        <div class="col-md-6">
                            <h2>Buttons Sizes</h2>

                            <p>
                                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                                <button type="button" class="btn btn-default btn-lg">Large button</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary">Default button</button>
                                <button type="button" class="btn btn-default">Default button</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-sm">Small button</button>
                                <button type="button" class="btn btn-default btn-sm">Small button</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
                                <button type="button" class="btn btn-default btn-xs">Extra small button</button>
                            </p>

                        </div>
                    </div>

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-6">
                            <h2>Images</h2>
                            <img class="img-rounded" alt="165x165" style="width: 165px; height: 165px;" src="img/holder.png" >
                            <img class="img-circle" alt="165x165" style="width: 165px; height: 165px;" src="img/holder.png" >
                            <img class="img-thumbnail" alt="165x165" style="width: 165px; height: 165px;" src="img/holder.png" >
                        </div>
                        <div class="col-md-6">
                            <h2>Thumbnails</h2>

                            <div class="row">
                                <div class="col-md-4">
                                    <a class="thumbnail" href="#">
                                        <img src="img/holder.png" alt="">
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a class="thumbnail" href="#">
                                        <img src="img/holder.png" alt="">
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a class="thumbnail" href="#">
                                        <img src="img/holder.png" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-6">
                            <h2>Tabs</h2>

                             <div class="tabs">
                                <ul class="nav nav-tabs">
                                     <li class="active"><a href="#popularPosts" data-toggle="tab"><i class="fa fa-star"></i> Popular</a></li>
                                    <li class=""><a href="#recentPosts" data-toggle="tab">Recent</a></li>
                                 </ul>
                                <div class="tab-content">

                                    <div class="tab-pane active" id="popularPosts">
                                        <ul class="simple-post-list">
                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/1.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/2.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/3.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>
                                              
                                        </ul>
                                    </div>

                                    <div class="tab-pane" id="recentPosts">
                                        <ul class="simple-post-list">
                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                             <img src="img/clients-downloads/3.jpg" alt="">
                                                        </a>
                                                    </div>
                                                 </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                         Nov 25 / 7 / 2013
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/2.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>

                                            <li>
                                                <div class="post-image">
                                                    <div class="img-thumbnail">
                                                        <a href="blog-post.html">
                                                            <img src="img/clients-downloads/1.jpg" alt="">
                                                        </a>
                                                     </div>
                                                </div>
                                                <div class="post-info">
                                                    <a href="blog-post.html">Pellentesque habitant morbi.</a>
                                                    <div class="post-meta">
                                                            Nov 25 / 7 / 2013
                                                     </div>
                                                 </div>
                                            </li>
                                              
                                        </ul>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="col-md-6">
                            <h2 class="short">Accordion</h2>

                            <div class="accordion-trigger"><i class="fa fa-android"></i>Questions 1</div>     
                            <div class="accordion-container">       
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                            </div>

                            <div class="accordion-trigger"><i class="fa fa-apple"></i> Questions 2</div>     
                            <div class="accordion-container">       
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                            </div>

                            <div class="accordion-trigger"><i class="fa fa-windows"></i> Questions 3</div>     
                            <div class="accordion-container">       
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                            </div>
                         
                        </div>

                    </div>

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="short">Alerts</h2>
                            <p>Styles for success, info, warning, and error messages</p>

                            <div class="alert alert-success">
                                <strong>Well done!</strong> You successfully read this important alert message.
                            </div>

                            <div class="alert alert-info">
                                <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                            </div>

                            <div class="alert alert-warning">
                                <strong>Warning!</strong> Best check yo self, you're not looking too good.
                            </div>

                            <div class="alert alert-danger">
                                <strong>Oh snap!</strong> Change a few things up and try submitting again.
                            </div>
                        </div>
                    </div>

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="short">Progress Bar</h2>

                            <div class="progress-bars">
                                <div class="progress-label">
                                    <span>HTML/CSS</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-primary" data-appear-progress-animation="100%" style="width: 100%;">
                                        <span class="progress-bar-tooltip" style="opacity: 1;">100%</span>
                                    </div>
                                </div>
                                <div class="progress-label">
                                    <span>Design</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="300" style="-webkit-animation: 300ms; width: 85%;">
                                        <span class="progress-bar-tooltip" style="opacity: 1;">85%</span>
                                    </div>
                                </div>
                                <div class="progress-label">
                                    <span>WordPress</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-primary" data-appear-progress-animation="75%" data-appear-animation-delay="600" style="-webkit-animation: 600ms; width: 75%;">
                                        <span class="progress-bar-tooltip" style="opacity: 1;">75%</span>
                                    </div>
                                </div>
                                <div class="progress-label">
                                    <span>Photoshop</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-primary" data-appear-progress-animation="85%" data-appear-animation-delay="900" style="-webkit-animation: 900ms; width: 85%;">
                                        <span class="progress-bar-tooltip" style="opacity: 1;">85%</span>
                                    </div>
                                </div>
                            </div>

                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 40%">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" style="width: 20%">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning" style="width: 60%">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger" style="width: 80%">
                                    <span class="sr-only">80% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-info" style="width: 40%">
                                    <span class="sr-only">40% Complete (info)</span>
                                </div>
                            </div>
                            <div class="progress progress-striped active">
                                <div class="progress-bar" style="width: 45%">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-12 tooltip-hover">
                            <h2>Tooltips</h2>
                            <p>Tight pants next level keffiyeh <a data-toggle="tooltip" href="#" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a  data-toggle="tooltip" href="#" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. </p>
                        </div>
                    </div>

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-6">
                            <h2 class="short">Simple Slide</h2>
                            
                            <!-- Simple-slide --> 
                            <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="img/works/1.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="img/works/2.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="img/works/3.jpg" alt="">
                                    </div>
                                </div>
                                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                    <span class="icon-prev"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                    <span class="icon-next"></span>
                                </a>
                            </div>
                            <!-- End Simple-slide -->                              
                          
                           
                        </div>
                        <div class="col-md-6">

                            <h2 class="short">Modal</h2>
                            <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
                            <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>

                            <button class="btn btn-primary btn-lg pull-top" data-toggle="modal" data-target="#myModal">
                                Launch demo modal
                            </button>

                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                        </div>
                                        <div class="modal-body">
                                            One fine body...
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="tall">

                            <h2>Labels</h2>

                            <span class="label label-default">Default</span>
                            <span class="label label-primary">Primary</span>
                            <span class="label label-success">Success</span>
                            <span class="label label-info">Info</span>
                            <span class="label label-warning">Warning</span>
                            <span class="label label-danger">Danger</span>

                        </div>
                    </div>


                    <hr class="tall">
                </div>
            </div>


            <div class="paddings section-gray borders">
                        <h2 class="text-center">Recent Works</h2>
                         <!-- Items Works -->
                        <ul id="works" class="works padding-top-mini">

                            <!-- Item Work -->
                            <li class="item-work">
                               <div class="hover">
                                    <img src="img/works/1.jpg" alt="Image"/>                               
                                     <a href="img/works/1.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                                </div>                                   
                                <div class="info-work">
                                    <h4> Jekas - Html</h4>
                                    <p>Great, Unique and responsive template.</p>
                                    <div class="icons-work">
                                        <i class="fa fa-tablet" data-toggle="tooltip" title data-original-title="Responsive Desing"></i>
                                        <i class="fa fa-desktop" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                                    </div>
                                </div>  
                            </li>  
                            <!-- Item Work -->

                            <!-- Item Work -->
                            <li class="item-work">
                               <div class="hover">
                                    <img src="img/works/2.jpg" alt="Image"/>                               
                                     <a href="img/works/2.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                                </div>                                   
                                <div class="info-work">
                                    <h4> Mycv - Html</h4>
                                    <p>Great, Unique and responsive template.</p>
                                    <div class="icons-work">
                                        <i class="fa fa-android" data-toggle="tooltip" title data-original-title="Android Support"></i>
                                        <i class="fa fa-apple" data-toggle="tooltip" title data-original-title="Mac Support"></i> 
                                    </div>
                                </div>  
                            </li>  
                            <!-- Item Work -->

                            <!-- Item Work -->
                            <li class="item-work">
                               <div class="hover">
                                    <img src="img/works/3.jpg" alt="Image"/>                               
                                     <a href="img/works/3.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                                </div>                                   
                                <div class="info-work">
                                    <h4> Megahost - Html</h4>
                                    <p>Great, Unique and responsive template.</p>
                                    <div class="icons-work">
                                        <i class="fa fa-html5" data-toggle="tooltip" title data-original-title="Html5 Compatible"></i>
                                        <i class="fa fa-css3" data-toggle="tooltip" title data-original-title="Css3 Support"></i> 
                                    </div>
                                </div>  
                            </li>  
                            <!-- Item Work -->

                            <!-- Item Work -->
                            <li class="item-work">
                               <div class="hover">
                                    <img src="img/works/4.jpg" alt="Image"/>                               
                                     <a href="img/works/4.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                                </div>                                   
                                <div class="info-work">
                                    <h4> Studio - Landing Page</h4>
                                    <p>Great, Unique and responsive template.</p>
                                    <div class="icons-work">
                                        <i class="fa fa-linux" data-toggle="tooltip" title data-original-title="linux plataform"></i>
                                        <i class="fa fa-windows" data-toggle="tooltip" title data-original-title="Windows plataform"></i> 
                                        <i class="fa fa-apple" data-toggle="tooltip" title data-original-title="Mac plataform"></i> 
                                    </div>
                                </div>  
                            </li>  
                            <!-- Item Work -->

                            <!-- Item Work -->
                            <li class="item-work">
                               <div class="hover">
                                    <img src="img/works/5.jpg" alt="Image"/>                               
                                     <a href="img/works/5.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                                </div>                                   
                                <div class="info-work">
                                    <h4> Ebook - Landing Page</h4>
                                    <p>Great, Unique and responsive template.</p>
                                    <div class="icons-work">
                                        <i class="fa fa-tablet" data-toggle="tooltip" title data-original-title="Responsive Desing"></i>
                                        <i class="fa fa-desktop" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                                    </div>
                                </div>  
                            </li>  
                            <!-- Item Work -->

                            <!-- Item Work -->
                            <li class="item-work">
                               <div class="hover">
                                    <img src="img/works/6.jpg" alt="Image"/>                               
                                     <a href="img/works/6.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                                </div>                                   
                                <div class="info-work">
                                    <h4> Gotten - Landing Page</h4>
                                    <p>Great, Unique and responsive template.</p>
                                    <div class="icons-work">
                                        <i class="fa fa-linux" data-toggle="tooltip" title data-original-title="Linux"></i>
                                        <i class="fa fa-desktop" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                                    </div>
                                </div>  
                            </li>  
                            <!-- Item Work -->

                        </ul>
                        <!-- End Items Works -->
            </div>

            <div class="container">

                    <hr class="tall">

                    <div class="row">
                        <div class="col-md-6">

                            <h2 class="short">Forms</h2>
                            <p>Individual form controls automatically receive some global styling.</p>
                            <form>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-6">
                                            <label>Your name *</label>
                                            <input type="text" value="" maxlength="100" class="form-control" name="name" id="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Your email address *</label>
                                            <input type="email" value="" maxlength="100" class="form-control" name="email" id="email">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label>Comment *</label>
                                            <textarea maxlength="5000" rows="10" class="form-control" name="comment" id="comment" style="height: 138px;"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-6">

                            <h2 class="short">Pagination</h2>

                            <p class="short">Large</p>
                            <ul class="pagination pagination-lg">
                                <li><a href="#">«</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">»</a></li>
                            </ul>

                            <p class="short">Default</p>
                            <ul class="pagination">
                                <li><a href="#">«</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">»</a></li>
                            </ul>

                            <p class="short">Small</p>
                            <ul class="pagination pagination-sm">
                                <li><a href="#">«</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">»</a></li>
                            </ul>

                        </div>

                    </div>

                </div>         
               

            </div>
            <!-- End Container-->
        </section>
        <!-- End Works-->
   

        <!-- footer top-->
        <footer class="footer-top">
            <div class="container">
               <div class="row">   
                   <div class="col-md-3">
                       <h3>018000-236-5899 </h3>
                   </div>
                   <div class="col-md-3">
                       <h3><a href="#">Support</a> - <a href="#">Sales</a></h3>
                   </div>
                   <div class="col-md-3">
                       <h3><a href="mailto:sales@roken.com" target="_blank">sales@roken.com</a></h3>
                   </div>
                   <div class="col-md-3">
                       <h3>24x7x365</h3>
                   </div>
               </div>                
            </div>
        </footer>      
        <!-- End footer Top-->

        <!-- footer Center-->
        <footer class="footer-center">
            <div class="container">

               <div class="row top">   
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-phone"></i>
                        <h4>Talk to u</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-comment"></i>
                        <h4>Live Chat</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                       <span class="arrow_footer"></span>
                        <i class="fa fa-envelope"></i>
                        <h4>Email Us</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-thumbs-up"></i>
                        <h4>Good Support</h4>                        
                   </div>
               </div>    

                <div class="row">   
                   <div class="col-md-4">
                        <div class="border-right">
                            <i class="fa fa-twitter"></i>
                            <h4>Latest Tweet</h4>                     
                            <div class="twitter">  

                            </div>                        
                        </div>
                   </div>
                   <div class="col-md-3">
                        <div class="border-right">
                            <h4>Newsletter</h4>
                            <p>Enter your e-mail and subscribe to our newsletter.</p>

                            <form id="newsletterForm" action="php/mailchip/newsletter-subscribe.php">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                    <input class="form-control" placeholder="Email Address" name="email"  type="email" required="required">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="submit" name="subscribe" >Go!</button>
                                    </span>
                                </div>
                            </form>   
                            <div id="result-newsletter"></div>
                       </div>
                    </div>
                    <div class="col-md-2">
                        <div class="border-right">
                            <h4>Recent Links</h4>
                            <ul class="links">
                                <li><i class="fa fa-check"></i> <a href="#">Work</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">About Us</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">Services</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">Contact</a></li>
                            </ul>
                       </div>
                    </div>
                   <div class="col-md-3">
                        <h4>Recent flickr</h4>
                        <ul id="flickr" class="thumbs"></ul>
                   </div>
               </div>    

            </div>
        </footer>      
        <!-- End footer Center-->

        <!-- footer bottom-->
        <footer class="footer-bottom">
            <div class="container">
               <div class="row">   
                                                                  
                    <!-- Nav-->
                    <div class="col-md-8">
                        <div class="logo-footer">
                            <h2><span>R</span>oken<span>.</span></h2>
                        </div>
                        <!-- Menu-->
                        <ul class="menu-footer">
                            <li><a href="index.html">HOME</a> </li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES</a></li> 
                            <li><a href="portfolio.html">PORTFOLIO</a></li> 
                            <li><a href="blog.html">BLOG</a></li>                                                     
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                        <!-- End Menu-->

                        <!-- coopring-->
                       <div class="row coopring">
                           <div class="col-md-8">
                               <p>&copy; 2013 Roken . All Rights Reserved.  1995 - 2013</p>
                           </div>
                       </div>    
                       <!-- End coopring-->  

                    </div>
                    <!-- End Nav-->

                    <!-- Social-->
                    <div class="col-md-4">
                        <!-- Social-->
                        <ul class="social">
                            <li data-toggle="tooltip" title data-original-title="Facebook">
                                <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                            </li> 
                            <li data-toggle="tooltip" title data-original-title="Twitter">
                                <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                            </li> 
                            <li data-toggle="tooltip" title data-original-title="Youtube">
                                <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                            </li>                     
                        </ul>
                        <!-- End Social-->
                    </div>
                    <!-- End Social-->

               </div> 
                    
            </div>
        </footer>      
        <!-- End footer bottom-->

    </div>
    <!-- End layout-->

   <!-- ======================= JQuery libs =========================== -->
    <!-- Always latest version of jQuery-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <!-- jQuery local-->    
    <script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>    
    <!--Nav-->
    <script type="text/javascript" src="js/nav/tinynav.js"></script> 
    <script type="text/javascript" src="js/nav/superfish.js"></script> 
    <script type="text/javascript" src="js/nav/hoverIntent.js"></script>  
    <script src="js/nav/jquery.sticky.js" type="text/javascript"></script>                                          
    <!--Totop-->
    <script type="text/javascript" src="js/totop/jquery.ui.totop.js" ></script>  
    <!--Slide-->
    <script type="text/javascript" src="js/slide/camera.js" ></script>      
    <script type='text/javascript' src='js/slide/jquery.easing.1.3.min.js'></script>  
    <!--FlexSlider-->
    <script src="js/flexslider/jquery.flexslider.js"></script> 
    <!--Ligbox--> 
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script> 
    <!-- carousel.js-->
    <script src="js/carousel/carousel.js"></script>  
    <!-- Twitter Feed-->
    <script src="js/twitter/jquery.tweet.js"></script> 
    <!-- flickr Feed-->
    <script src="js/flickr/jflickrfeed.min.js"></script>  
    <!--Scroll-->   
    <script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- Nicescroll -->
    <script src="js/scrollbar/jquery.nicescroll.js"></script>
    <!-- Maps -->
    <script src="js/maps/gmap3.js"></script>
    <!-- Filter -->
    <script src="js/filters/jquery.isotope.js" type="text/javascript"></script>
    <!--Theme Options-->
    <script type="text/javascript" src="js/theme-options/theme-options.js"></script>
    <script type="text/javascript" src="js/theme-options/jquery.cookies.js"></script>                               
    <!-- Bootstrap.js-->
    <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
    <!--MAIN FUNCTIONS-->
    <script type="text/javascript" src="js/main.js"></script>
    <!-- ======================= End JQuery libs =========================== -->
        
    </body>
</html>